<script lang="tsx">
import { type ButtonOptions, propTypes } from '@/types/propTypes'
import { ElCol, ElButton } from 'element-plus'
import { computed, defineComponent, type PropType } from 'vue'
export default defineComponent({
  name: 'BasicFormAction',
  props: {
    showActionButtonGroup: propTypes.bool.def(false),
    showResetButton: propTypes.bool.def(true),
    showSubmitButton: propTypes.bool.def(true),
    showAdvancedButton: propTypes.bool.def(false), //展开、隐藏
    actionSpan: propTypes.number.def(6), //col
    actionColBool: propTypes.bool.def(false), //是否站一行
    actionClass: propTypes.string,
    resetButtonOptions: {
      type: Object as unknown as PropType<ButtonOptions>,
      default: () => {},
    },
    submitButtonOptions: {
      type: Object as unknown as PropType<ButtonOptions>,
      default: () => {},
    },
  },
  emits: ['handle-reset', 'handle-search'],
  setup(props, { emit, slots }) {
    // col 数据
    const actionColOpt = computed(() => {
      const { showAdvancedButton, actionSpan: span, actionColBool } = props
      // console.log("span", span)

      const actionSpan = 24 - (span as number)
      let advancedSpanObj = {}
      if (actionColBool) {
        // 是否站一行
        advancedSpanObj = { span: 24 }
      } else {
        advancedSpanObj = showAdvancedButton
          ? { span: actionSpan < 6 ? 24 : actionSpan }
          : { span: actionSpan < 4 ? 24 : actionSpan }
      }
      // console.log("advancedSpanObj ", advancedSpanObj)

      return advancedSpanObj
    })

    function handleReset() {
      emit('handle-reset')
    }
    function handleSearch() {
      emit('handle-search')
    }
    // 重置按钮
    function ResetButton() {
      let { showResetButton, resetButtonOptions = { title: '' } } = props
      let optin: any = {}
      Object.keys(resetButtonOptions).map((e) => {
        if (e != 'title') {
          optin[e] = (resetButtonOptions as any)[e]
        }
      })
      const getResetBtnOptions: any = computed(() => {
        return {
          onClick: handleReset,
          ...optin,
        }
      })
      return showResetButton ? (
        <ElButton {...getResetBtnOptions.value} class="mr-2">
          {resetButtonOptions.title || '重置'}
        </ElButton>
      ) : null
    }

    // 确定按钮
    function SubmitButton() {
      let { showSubmitButton, submitButtonOptions = { title: '' } } = props
      let optin: any = {}
      Object.keys(submitButtonOptions).map((e) => {
        if (e != 'title') {
          optin[e] = (submitButtonOptions as any)[e]
        }
      })
      const getResetBtnOptions: any = computed(() => {
        return {
          type: 'primary',
          onClick: handleSearch,
          ...optin,
        }
      })
      return showSubmitButton ? (
        <ElButton {...getResetBtnOptions.value} class="mr-2">
          {submitButtonOptions.title || '查询'}
        </ElButton>
      ) : null
    }

    return () => {
      const { showActionButtonGroup, actionClass } = props
      const actionClassd = actionClass || 'flex items-center justify-end'
      return showActionButtonGroup ? (
        <ElCol {...actionColOpt.value}>
          <div class={['mb-[18px]', actionClassd]} style="width: 100%">
            {slots.resetBefore ? slots.resetBefore() : null}
            {ResetButton()}
            {slots.submitBefore ? slots.submitBefore() : null}
            {SubmitButton()}
            {slots.advanceBefore ? slots.advanceBefore() : null}
          </div>
        </ElCol>
      ) : null
    }
  },
})
</script>
